<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>会员列表</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f4f4f4;
            margin: 0;
            padding: 0;
        }
        h1 {
            text-align: center;
            color: #333;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px auto;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        th, td {
            padding: 12px 15px;
            text-align: left;
            border-bottom: 1px solid #ddd;
        }
        th {
            background-color: #007BFF;
            color: white;
        }
        tr:nth-child(even) {
            background-color: #f9f9f9;
        }
        tr:hover {
            background-color: #f1f1f1;
        }
        a {
            display: inline-block;
            margin-right: 10px;
            padding: 5px 10px;
            background-color: #007BFF;
            color: white;
            text-decoration: none;
            border-radius: 5px;
        }
        a:hover {
            background-color: #0056b3;
        }
        .btn-delete {
            background-color: #DC3545;
        }
        .btn-delete:hover {
            background-color: #C82333;
        }
    </style>
</head>
<body>
<h1>会员列表</h1>
<!--<a href="${/addUser}" style="margin-left: 60px;">新增</a>-->
<!--<a href="${/}" >刷新</a>-->
<a th:href="@{/addUser}" style="margin-left: 60px;">新增</a>
<a th:href="@{/}" >刷新</a>
<table>
    <tr>
        <th>序号</th>
        <th>登录名</th>
        <th>用户名</th>
        <th>密码</th>
        <th>年龄</th>
        <th>Email</th>
        <th>角色</th>
        <th>操作</th>
    </tr>
    <tr th:each="user, iterStat  : ${users}">
        <td th:text="${iterStat.count}"></td>
        <td th:text="${user.name}"></td>
        <td th:text="${user.username}"></td>
        <td th:text="${user.password}"></td>
        <td th:text="${user.age}"></td>
        <td th:text="${user.email}"></td>
        <td th:text="${user.role}"></td>
        <td>
<!--            <a th:href="@{/view/{id}(id=${user.id})}">View</a>-->
            <a th:href="@{/edit/{id}(id=${user.id})}">编辑</a>
            <a class="delete-user-link" th:href="@{/users/data/deleteUser/{id}(id=${user.id})}" th:data-id="${user.id}">删除</a>
        </td>
    </tr>
</table>

<!--<a href="/login">Logout</a>-->
</body>
<script>
    document.querySelectorAll('.delete-user-link').forEach(link => {
        link.addEventListener('click', function(event) {
            event.preventDefault(); // 阻止链接的默认行为

            const userId = this.getAttribute('data-id'); // 获取用户ID
            const deleteUrl = this.getAttribute('href'); // 获取删除接口的URL

            // 发送DELETE请求
            fetch(deleteUrl, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                .then(response => {
                    if (!response.ok) {
                        throw new Error('Network response was not ok');
                    }
                    return response.json();
                })
                .then(data => {
                    console.log('Success:', data);
                    // 刷新当前页面
                    window.location.reload();
                })
                .catch(error => {
                    console.error('Error:', error);
                    alert('Failed to delete user.');
                });
        });
    });
</script>

</html>
